<template>
  <view class="dy-scroll-container">
    <dy-navbar title="Mask" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-button type="primary" @click="baseUsed.show = true">
            显示蒙层
          </dy-button>
        </template>
      </dy-card>
      <!-- 过渡动画 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="过渡动画" />
        <template slot="body">
          <dy-button type="primary" class="dy-mg-right-24" @click="handleShowAnimation('top')">
            顶部滑入滑出
          </dy-button>
          <dy-button type="primary" @click="handleShowAnimation('bottom')">
            下方滑入滑出
          </dy-button>
          <dy-button type="primary" class="dy-mg-right-24" @click="handleShowAnimation('left')">
            左侧滑入滑出
          </dy-button>

          <dy-button type="primary" @click="handleShowAnimation('right')">
            右侧滑入滑出
          </dy-button>
        </template>
      </dy-card>
      <!-- 过渡时间 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="过渡时间（duration: 3000）" />
        <template slot="body">
          <dy-button type="primary" @click="duration.show = true">
            显示蒙层
          </dy-button>
        </template>
      </dy-card>
      <!-- 点击遮罩层不关闭 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="点击遮罩层不关闭" />
        <template slot="body">
          <dy-button type="primary" @click="maskCloseable.show = true">
            显示蒙层
          </dy-button>
        </template>
      </dy-card>
      <!-- 背景颜色 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="背景颜色" />
        <template slot="body">
          <dy-button type="primary" @click="background.show = true">
            显示蒙层
          </dy-button>
        </template>
      </dy-card>
    </scroll-view>
    <!-- 基础用法 popup -->
    <dy-mask v-model="baseUsed.show" />
    <dy-mask
      v-model="animation.show"
      :animation-show="animation.animationShow"
      :animation-hide="animation.animationHide"
    />
    <dy-mask v-model="duration.show" duration="3000" />
    <dy-mask ref="unCloseableMask" v-model="maskCloseable.show" :mask-closeable="false">
      <view class="dy-abso-center">
        <dy-button
          color="#5A8FFF"
          bg-color="#EEF2FF"
          width="250"
          round
          @click="handleCloseUnCloseableMask"
        >
          关闭蒙层
        </dy-button>
      </view>
    </dy-mask>
    <dy-mask v-model="background.show" append-to-body background="rgba(0, 0, 0, .9)" />
  </view>
</template>

<script>
export default {
  name: 'MaskPage',
  data() {
    return {
      baseUsed: {
        show: false
      },
      animation: {
        show: false,
        animationShow: 'dy-ani-slide-top-show',
        animationHide: 'dy-ani-slide-top-hide',
        style: { width: '100%', height: '800rpx' }
      },
      duration: {
        show: false
      },
      maskCloseable: {
        show: false
      },
      background: {
        show: false
      }
    }
  },
  methods: {
    handleShowAnimation(position = 'top') {
      const positionAnimationMap = {
        top: { animationShow: 'dy-ani-slide-top-show', animationHide: 'dy-ani-slide-top-hide' },
        bottom: {
          animationShow: 'dy-ani-slide-bottom-show',
          animationHide: 'dy-ani-slide-bottom-hide'
        },
        left: { animationShow: 'dy-ani-slide-left-show', animationHide: 'dy-ani-slide-left-hide' },
        right: {
          animationShow: 'dy-ani-slide-right-show',
          animationHide: 'dy-ani-slide-right-hide'
        }
      }
      this.animation = {
        show: true,
        ...positionAnimationMap[position]
      }
    },
    handleCloseUnCloseableMask() {
      this.$refs.unCloseableMask.closeMask()
    }
  }
}
</script>
